<template>
    <van-cell class="article-item">
        <template class="article-item-title van-multi-ellipsis--l3" #title>{{article.title}}</template>
        <template #label>
            <div v-if="article.cover.type === 3" class="cover-wrap">
                <div  class="cover-wrap-item" v-for="(img) in article.cover.images" :key="img.id" >
                    <van-image class="cover-right"  fit="cover" :src="img" />
                </div>
            </div>
            <div class="label-wrap">
                <span>{{article.aut_name}}</span>
                <span>{{article.comm_count}}</span>
                <span>{{rtTime(article.pubdate)}}</span>
            </div>
        </template>
        <template #default>
            <van-image v-if="article.cover.type === 1" class="cover-right"  fit="cover" :src="article.cover.images[0]" />
        </template>
    </van-cell>
</template>

<script lang="ts">
import { defineComponent,ref } from 'vue'
import { useRouter, useRoute  } from 'vue-router'
import { getArticlesDetail } from 'api/article'

import { rtTime } from 'utils/dayjs'

export default defineComponent ({
    props:{
        article:{
            type:Object,
            required:true
        }
    },
    setup(props) {

        return {
            rtTime,
        }
    }
})
</script>

<style lang="scss" scoped>
    .article-item {
        .article-item-title {
            font-size: 16px;
            color: #3a3a3a;
        }

        .cover-right {
            width: 116px;
            height: 73px;
        }
        ::v-deep .van-cell__value {
            flex:unset;
            margin-left: 12px;
            width: 116px;
            height: 73px;
        }

        .cover-wrap {
            display: flex;
            padding: 15px 0;
            .cover-wrap-item {
                flex:1;
                height: 73px;
                &:not(:last-child) {
                    padding-right: 4px;
                }
            }
        }

        .label-wrap {
            font-size:11px;
            color: #b4b4b4;
            span {
                margin-right:12px;
            }
        }
    }
</style>